<html>

<head>


</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.js"></script>
  <script src="lib/leap-0.6.4.js"></script>
  <script src="lib/leap-plugins-0.1.12.js"></script>
  <script src="lib/OrbitControls.js"></script>
  <h3>Hand data:</h3>
  <div id="handData"></div>
  <h3>Gesture data:</h3>
  <div id="gestureData"></div>
</body>

<script>
  const Counter = (function() {
    let count = 0;
    return {
      incrementAndVerify: function() {
        count++;
        if (count === 5) {
          count = 0;
          return true;
        } else {
          return false;
        }
      }
    }
  })();
  const Counter2 = (function() {
  let count = 0;
  return {
    incrementAndVerify: function() {
      count++;
      if (count === 30) {
        count = 0;
        return true;
      } else {
        return false;
      }
    }
  }
})();
  
  var previousFrame = null;
  var paused = false;
  var pauseOnGesture = false;
  var controllerOptions = { enableGestures: true };


  Leap.loop(controllerOptions, function (frame) {
    var frameOutput = document.getElementById("frameData");

    var frameString = 
      + "Hands: " + frame.hands.length + "<br />"
      + "Fingers: " + frame.fingers.length + "<br />"
      + "Gestures: " + frame.gestures.length + "<br />";

    // Display Hand object data
    var handOutput = document.getElementById("handData");
    var handString = "";
    if (frame.hands.length > 0) {
      let strengthSum = 0;
      for (var i = 0; i < frame.hands.length; i++) {
        var hand = frame.hands[i];
        strengthSum += parseFloat(hand.grabStrength) + parseFloat(hand.pinchStrength);
        handString += "<div style='width:300px; float:left; padding:5px'>";
        handString += "Hand ID: " + hand.id + "<br />";
        handString += "Type: " + hand.type + " hand" + "<br />";
        handString += "Direction: " + vectorToString(hand.direction, 2) + "<br />";
        handString += "Grab strength: " + hand.grabStrength + "<br />";
        handString += "Pinch strength: " + hand.pinchStrength + "<br />";
        handString += "Confidence: " + hand.confidence + "<br />";
        handString += "Arm direction: " + vectorToString(hand.arm.direction()) + "<br />";
        handString += "Arm center: " + vectorToString(hand.arm.center()) + "<br />";
        handString += "Arm up vector: " + vectorToString(hand.arm.basis[1]) + "<br />";
        handString += "</div>";
        if (hand.arm.direction()[0] < -0.7) {
          if (Counter2.incrementAndVerify()) {
            execute("turn-on-relay");
            setTimeout(function() {
              execute("turn-off-relay");
            }, 3000);
          }
        }
        if (hand.arm.direction()[0] > 0.7) {
          if (Counter2.incrementAndVerify()) {
            execute("turn-on-relay2");
            setTimeout(function() {
              execute("turn-off-relay2");
            }, 3000);          
          }
        }             
      }
    }
    else {
      handString += "No hands";
    }
    handOutput.innerHTML = handString;

    // Display Gesture object data
    var gestureOutput = document.getElementById("gestureData");
    var gestureString = "";
    if (frame.gestures.length > 0) {
      if (pauseOnGesture) {
        togglePause();
      }
      for (var i = 0; i < frame.gestures.length; i++) {
        var gesture = frame.gestures[i];
        gestureString += "Gesture ID: " + gesture.id + ", "
          + "type: " + gesture.type + ", "
          + "state: " + gesture.state + ", "
          + "hand IDs: " + gesture.handIds.join(", ") + ", "
          + "pointable IDs: " + gesture.pointableIds.join(", ") + ", "
          + "duration: " + gesture.duration + " &micro;s, ";

        switch (gesture.type) {
          case "circle":
            gestureString += "center: " + vectorToString(gesture.center) + " mm, "
              + "normal: " + vectorToString(gesture.normal, 2) + ", "
              + "radius: " + gesture.radius.toFixed(1) + " mm, "
              + "progress: " + gesture.progress.toFixed(2) + " rotations";
            break;
          case "swipe":
            gestureString += "start position: " + vectorToString(gesture.startPosition) + " mm, "
              + "current position: " + vectorToString(gesture.position) + " mm, "
              + "direction: " + vectorToString(gesture.direction, 1) + ", "
              + "speed: " + gesture.speed.toFixed(1) + " mm/s";
            const x = gesture.direction[0];
            const y = gesture.direction[1];
            const max = Math.max(Math.abs(x), Math.abs(y));
            if (Counter.incrementAndVerify()) {
              if (max === Math.abs(x)) {
                if (x < 0) {
                  execute("turn-left");
                } else {
                  execute("turn-right");
                }
              } else {
                if (y < 0) {
                  execute("stop");
                } else {
                  execute("forward");
                }
              }
            }
            break;
          case "screenTap":
          case "keyTap":
            gestureString += "position: " + vectorToString(gesture.position) + " mm";
            break;
          default:
            gestureString += "unkown gesture type";
        }
        gestureString += "<br />";
      }
    }
    else {
      gestureString += "No gestures";
    }
    gestureOutput.innerHTML = gestureString;

    // Store frame for motion functions
    previousFrame = frame;
  })
    .use('boneHand', {
      targetEl: document.body,
      arm: true,
      opacity: 0.8
    });

  function vectorToString(vector, digits) {
    if (typeof digits === "undefined") {
      digits = 1;
    }
    return "(" + vector[0].toFixed(digits) + ", "
      + vector[1].toFixed(digits) + ", "
      + vector[2].toFixed(digits) + ")";
  }

  function execute(command) {
    try {
      fetch(`http://192.168.78.1:6318/${command}`);
    } catch (error) {
      console.log(error);
    }
  }
</script>

</html>